<template>
	<!-- 量化分级-头部 -->
	<view class="">
		<view class="header">
			<image class="lhfj-bg" :src="lhfjBg" mode="scaleToFill"></image>
			<view class="lhfj-header">
				<!-- 搜索 -->
				<view class="search-bar">
					<u-search placeholder="请输入搜索关键字" v-model="keyword" height="80" bg-color="#fff" shape="round"
						:show-action="false" @search="search"></u-search>
				</view>
				<!-- 文案 -->
				<view class="text-bar">
					<view class="text1">找饭店 看星级</view>
					<view class="text2">提升餐饮服务品质，提高餐饮安全系数，增加社会公信力</view>
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="nav-bar">
			<u-tabs-slot height="200" :list="navList" name="name" :with-icon="true" icon-name="icon" :is-scroll="false" v-model="navNum" @change="changeNav"></u-tabs-slot>
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import DEMO_NAV from "@/data/demoNavLhfj.js";
	
	export default {
		name:"lhfj-header",
		props: {
			currentNav: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				lhfjBg: this.$resource.lhfjBg, // 顶部背景
				keyword: '',
				navList: [], // 导航
				navNum: 0,
			}
		},
		mounted(){
			this.initPage();
		},
		methods: {
			initPage() {
				this.navNum = this.currentNav;
				this.getNavList();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 搜索
			search() {
				this.$emit('search', {keyword: this.keyword})
			},
			// 点击导航
			changeNav(index) {
				this.pageTo(this.navList[index].href);
			},
			// 读取导航列表
			getNavList() {
				console.log(getApp().globalData)
				this.navList = getApp().globalData.lhfjNavList;
			},
		}
	}
</script>

<style scoped>
	@import url(@/static/css/main.css);
.header {
		background-color: #33AF71;
		position: relative;
		width: 100%;
		height: 380rpx;
	}

	.lhfj-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	.lhfj-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;

		color: #fff;
		text-align: center;
	}

	.lhfj-header .search-bar {
		margin: 30rpx auto 50rpx;
		width: 70%;
	}

	.lhfj-header .text-bar .text1 {
		margin-bottom: 50rpx;
		font-size: 18px;
		font-weight: 700;
	}

	.lhfj-header .text-bar .text2 {
		font-size: 10px;
	}
</style>